'use strict'
const TerserPlugin = require('terser-webpack-plugin');
const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');
const path = require('path')
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'static',
    indexPath: 'index.html',
    lintOnSave: false,
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    productionSourceMap: false,
    devServer: {
        port: 9527,
        https: false,
        hotOnly: false,
        open: true,
        proxy: null,
        overlay: {
            warnings: false,
            errors: true
        },
    },
    configureWebpack: config => {
        // vue骨架屏插件配置
        config.plugins.push(new SkeletonWebpackPlugin({
            webpackConfig: {
                entry: {
                    app: path.join(__dirname, './src/utils/skeleton.js'),
                },
            },
            minimize: true,
            quiet: true,
        }))
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            return {
                // 打包去掉console 必须引入TerserPlugin
                optimization: {
                    minimizer: [new TerserPlugin({
                        terserOptions: {
                            compress: {
                                drop_console: true
                            }
                        }
                    })]
                },
                // 关闭 webpack 的性能提示
                performance: {
                    hints: false
                }
            }
        } else {
            // 为开发环境修改配置...
            return;
        }
    },
    // / 构建多页时使用
    // pages: {
    //     index: {
    //         // 入口文件
    //         entry: './src/main.js',
    //         // 模版文件
    //         template: 'public/index.html',
    //         // 输出文件名
    //         filename: 'index.html'
    //     }
    // },
    // CSS 相关选项
    css: {
        requireModuleExtension: true,
        // 生产环境下是 true，开发环境下是 false，提取 CSS 在开发环境模式下是默认不开启的
        // extract: false,
        sourceMap: false,
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtoviewport({
                        viewportWidth: 375
                    })
                ]
            }
        }
    }
}